<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>豆瓣海报</title>
    <meta name="applicable-device" content="pc,mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<!--<link href="css/slick.css" rel="stylesheet" type="text/css">-->
<!--<link href="css/slick-theme.min.css" rel="stylesheet" type="text/css">-->
<link href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" type="text/css">
<link href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" type="text/css">
    <style type="text/css">

        /* 显示元素设定 */
        .slider {
            position: absolute;
            left: 2%;
            width: 96%;
        }

        .slider img {
            /*border: 5px solid #fff;*/
            display: block;
            border-radius: 10px;
            -webkit-animation: click_in 0.6s ease-in-out 1;
        }

        .slick-slide{
            margin: 0 5px 0 5px;
        }

        .slider img:active {
            -webkit-animation: click 0.8s ease-in-out infinite;
            background: rgba(0, 0, 0, 0.3);
        }

        @-webkit-keyframes click {
            0% {-webkit-transform: scale(0.85)}
            50% {-webkit-transform: scale(1.1);}
            100% {-webkit-transform: scale(0.85)}
        }
        @-webkit-keyframes click_in {
            0% {-webkit-transform: scale(0.3)}
            50% {-webkit-transform: scale(1.05)}
            100% {-webkit-transform: scale(1)}
        }
        @-webkit-keyframes click_out {
            0% {opacity: 1; -webkit-transform: translate(0,0) scale(1)}
            70% {opacity:0.9; -webkit-transform: translate(24.5%,50%) scale(0.4)}
            100% {opacity:0.0; -webkit-transform: translate(24.5%,46%) scale(0.6)}
        }
        @-webkit-keyframes click_out_yy {
            0% {opacity: 1; -webkit-transform: translate(0,0) scale(1)}
            70% {opacity:0.9; -webkit-transform: translate(24.5%,-35%) scale(0.4)}
            100% {opacity:0.0; -webkit-transform: translate(24.5%,-30%) scale(0.6)}
        }
        @-webkit-keyframes likes {
            0% {-webkit-transform: scale(1)}
            25% {-webkit-transform: scale(0.85)}
            50% {-webkit-transform: scale(1.1)}
            75% {-webkit-transform: scale(0.85)}
            100% {-webkit-transform: scale(1)}
        }
        @-webkit-keyframes tq_bg {
            0% {background-position: 0% 50%}
            50% {background-position: 100% 50%}
            100% {background-position: 0% 50%}
        }
        
        .slider button {
            visibility: hidden;
        }

        .msgbox {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 300px;
            max-width: 600px;
            transform: translate(-50%,-50%);
            z-index: 99999;
            text-align: center;
            padding: 15px;
            border-radius: 3px;
        }

        .info {
            color: #ffc152;
            background-color: #ffffff;
            border-color: #d6e9c6;
        }

        .error {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
        
        
 @media (prefers-color-scheme: dark) {
  body {
    background-color: #1B1B1B;
  }
}

 @media (prefers-color-scheme: light) {
  body {
    background-color: transparent;
  }
}
        
    </style>

<!--<script src="js/jquery.min.js" type="text/javascript"></script>-->
<!--<script src="js/slick.min.js" type="text/javascript"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
    <script type="text/javascript">

        //读取配置
        let Dict = localStorage.getItem("dict")?

        JSON.parse(localStorage.getItem("dict")):
        {
            //tags:"", //类型  电影, 电视剧, 动漫,综艺
            countries:"", //国家
            year_range:"", //年份 2019,2020
            sort:"U" //排序 按热度排序T、按时间排序R、按评分排序S、按近期热门U
        };



        const DOUBAN_TAGS = ["电影", "电视剧", "动漫","综艺"];
        const DOUBAN_TYPES = ["movie", "tv", "tv","tv"];
        //const DOUBAN_URL = 'https://movie.douban.com/j/new_search_subjects?range=0,10&start=0&tags={0}&countries=&sort=S&year_range=2021,2022';
        let DOUBAN_URL = 'https://movie.douban.com/j/new_search_subjects?range=0,10&start=0&tags={0}&'+Object.keys(Dict).map( function(key){ return key+"="+Dict[key] }).join("&");
        const DOUBAN_DETAIL_URL = 'web://https://movie.douban.com/subject/';
        const HAIKUO_SEARCH_URL = 'hiker://search?s=';
        const MAX_SLIDER_SIZE = 40; // 最大图片显示张数
        const PLAY_SPEED = 1000; // 播放速度
        const PRESS_EVENT_TIMER = 1000; // 长按事件毫秒数
        const CACHE_TIMEOUT = 60 * 60 * 1000; // 缓存超时时间
        const SHAKE_THRESHOLD = 1800; // 摇一摇 摇动幅度
        const SHAKE_TIMES = 4; // 摇一摇 摇动次数
        const SHAKE_TIMER = 100; // 摇一摇 摇动检测间隔
        const SHAKE_CLEAR_TIMER = 500; // 摇一摇 摇动数据清空间隔
        const SHAKE_SLIDER_CHANGE_TXT = '滚屏切换中'; // 摇一摇切换文字

        let timeOutEvent = 0;
        let lastUpdate = 0;
        let x = y = z = lastX = lastY = lastZ = 0;
        let currentTagIdx = localStorage.getItem("DOUBAN_CURRENT_TAG_IDX") ? localStorage.getItem("DOUBAN_CURRENT_TAG_IDX") : 0;
        let shakeTimes = 0;

        let showInfoMsg = (msg, timeout) => {
            $('.msgbox').html(msg).addClass('info').show().delay(timeout).fadeOut();
        };

        let showErrorMsg = (msg, timeout) => {
            $('.msgbox').html(msg).addClass('error').show().delay(timeout).fadeOut();
        };

        // 点击
        let imgClick = (id) => {
            fba.open(JSON.stringify({title:"", url:'hiker://page/Sdetail#noHistory##immersiveTheme#?rule=青豆&id=' + id + '&type=' + DOUBAN_TYPES[currentTagIdx], extra:{newWindow: true,windowId: ""}}))
            //deviceShaking();
        };

        // 长按
        let imgTouch = (id) => {
            // location.href = DOUBAN_DETAIL_URL + id;
            //deviceShaking();
        };

        let getCache = () => {
            let cache = localStorage.getItem("DOUBAN_CACHE");
            if (cache) {
                let cacheArray = JSON.parse(cache);
                return Array.isArray(cacheArray) ? cacheArray : null;
            } else {
                return null;
            }
        };

        let readFromDouban = (url, callback) => {
            $.get(url)
                .done((data) => {
                    if (!data.data) callback();

                    let cache = getCache();
                    if (!cache) cache = [];

                    cache[currentTagIdx] = { time: new Date().getTime(), data: data };
                    localStorage.setItem('DOUBAN_CACHE', JSON.stringify(cache));
                    callback();
                })
                .fail(() => {
                    callback();
                });
        };

        let getDoubanData = (processDataCallback) => {


            let cache = getCache();
            let now = new Date().getTime();
            let doCallback = () => {
                cache = getCache();
                processDataCallback((cache && cache[currentTagIdx]) ? cache[currentTagIdx].data : null);
            };

            let bb=localStorage.getItem("dict")!=JSON.stringify(Dict);
            if(bb){
                localStorage.removeItem("DOUBAN_CACHE");
                localStorage.setItem("dict",JSON.stringify(Dict));
            }
            if (bb||!cache || !cache[currentTagIdx] || now > cache[currentTagIdx].time + CACHE_TIMEOUT) {
                let url = DOUBAN_URL.replace("{0}", DOUBAN_TAGS[currentTagIdx]);
                readFromDouban(url, () => {
                    doCallback();
                });
            } else {
                doCallback();
            }
        };

        let processData = (data) => {
                 if (!data || !data.data) {
                        showErrorMsg('刷新太多次豆瓣限制IP啦，过一天清除缓存再试试吧！', 5000);
                        return;
                    }



            for (let i = 0; i < MAX_SLIDER_SIZE && data.data.length > i; i++) {
                let image = $('<img>').attr('src', data.data[i].cover);
                image.on('touchstart', () => {
                    timeOutEvent = setTimeout(() => {
                        timeOutEvent = 0;
                        // 长按事件
                        imgTouch(data.data[i].id);
                    }, PRESS_EVENT_TIMER);
                });

                image.on('touchmove', () => {
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                });

                image.on('touchend', () => {
                    clearTimeout(timeOutEvent);
                    if (timeOutEvent != 0) {
                        // 点击事件
                        imgClick(data.data[i].id);
                    }
                });

                image.on('click', () => {
                    timeOutEvent = setTimeout(() => {
                        timeOutEvent = 0;
                        // 长按事件
                        imgTouch(data.data[i].id);
                    }, PRESS_EVENT_TIMER);
                });

                $('.slider').append(image);
            }

            $('.slider').slick({
                lazyLoad: 'ondemand',
                autoplaySpeed: PLAY_SPEED,
                slidesToShow: 3,
                autoplay: true,
                slidesToScroll: 1,
                pauseOnFocus: false,
                pauseOnHover: false,
                pauseOnDotsHover: false
            });

            let divWidth = Math.round(window.screen.width * 0.96 / 3);
            let divHeight = Math.round(divWidth / 3 * 4);
            //fba.refreshX5Desc('list&&' + (divHeight + 18));
            $('.slider').css( "height", divHeight);
            $('.slider img').css( "height", divHeight);
        };

        // 摇一摇
        deviceShaking = () => {



            currentTagIdx++;
            if (currentTagIdx >= DOUBAN_TAGS.length) currentTagIdx = 0;

            localStorage.setItem("DOUBAN_CURRENT_TAG_IDX", currentTagIdx);
            if(localStorage.getItem("dict")==null) {
                localStorage.setItem("dict", JSON.stringify(Dict));
            }
            let sort;
            //按热度排序T、按时间排序R、按评分排序S、按近期热门U
            switch(Dict["sort"]){
                case 'T':
                    sort='热度排序';
                    break;
                case 'R':
                    sort='时间排序';
                    break;
                case 'S':
                    sort='评分排序';
                    break;
                case 'U':
                    sort='近期热门';
                    break;
            }

            showInfoMsg(sort+" "+ Dict["countries"] +"当前分类: " + DOUBAN_TAGS[currentTagIdx], 1000);
            $('.slider').html('').removeClass().addClass('slider');

            getDoubanData((data) => {
                processData(data);
            });
        };

        let deviceMotionHandler = (e) => {
            let acceleration = e.accelerationIncludingGravity;
            let curTime = new Date().getTime();

            if ((curTime - lastUpdate) > SHAKE_TIMER) {
                let diffTime = curTime - lastUpdate;
                lastUpdate = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
                if (speed > SHAKE_THRESHOLD) {
                    shakeTimes++;

                    if (shakeTimes >= SHAKE_TIMES) {
                        shakeTimes = 0;
                        // 摇一摇事件
                        deviceShaking();
                    }
                } else if (curTime - lastUpdate > SHAKE_CLEAR_TIMER) {
                    shakeTimes = 0;
                }

                lastX = x;
                lastY = y;
                lastZ = z;
            }
        };

        $(document).ready(() => {

            getDoubanData((data) => {
                processData(data);

                // 添加传感器监听
                if (window.DeviceMotionEvent) {
                    window.addEventListener('devicemotion', deviceMotionHandler, false);
                } else {
                    showErrorMsg('您的设备不支持摇一摇', 3000);
                }
            });
        });

    </script>

</head>
<body>
<script>

    $(document).ready(function(){
        $(".btn1").click(function(){
            let dd=JSON.parse(localStorage.getItem("dict"));
            $('#countrie').val(dd["countries"]);
            $('#year_range').val(dd["year_range"]);
            $('#sort').val(dd["sort"]);
            $('#type').val(currentTagIdx);
            $(".data").slideToggle();
        });


        $("form").submit(function(e){
            localStorage.setItem('DOUBAN_CURRENT_TAG_IDX', $('#type').val());
            Dict["countries"]=$('#countrie').val();
            Dict["year_range"]=$('#year_range').val();
            Dict["sort"]=$('#sort').val();
            localStorage.removeItem("DOUBAN_CACHE");
            localStorage.setItem("dict",JSON.stringify(Dict));

            $('.slider').html('').removeClass().addClass('slider');
            getDoubanData((data) => {
                processData(data);
            });
            //$(".data").slideToggle();
            fy_bridge_app.refreshPage(true);

        });
    });

</script>

<style>

    input,select{
        border: 1px solid #ccc;
        padding: 7px 0px;
        border-radius: 3px;
        padding-left:5px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
    }
    input:focus,select:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }

    select option{
        font-size: 13pt;
        text-align:left;
    }
</style>

<div class="msgbox">
</div>
<button class="btn1"  style="position: fixed;height: 100px;width: 100px;top: 0px;right: 0px;background: transparent;z-index: 999;border: transparent;" ></button>

<div data-role="content" class="data" STYLE="display:none">
    <form method="get" action="">

        <div data-role="fieldcontain">
            <label for="type">类型：</label>
            <select id="type" name="sort">
                <option value="0">电影</option>
                <option value="1">电视剧</option>
                <option value="2">动漫</option>
                <option value="3">综艺</option>
            </select>
        </div>

        <div data-role="fieldcontain">
            <label>区域：</label>
            <input list="countries" id="countrie" name="text" value="" placeholder="输入区域中文">
            <datalist id="countries">
                <option value="中国大陆">
                <option value="中国香港">
                <option value="中国台湾">
                <option value="日本">
                <option value="韩国">
                <option value="美国">
            </datalist>
        </div>


        <div data-role="fieldcontain">
            <label for="year_range">年份：</label>
            <input  type="text" name="date" id="year_range" value="" placeholder="输入年份比如2024,2025"
                    onchange="if(/[^\d\,\/]/ig.test(this.value)){$('#lab1').html('只能输入数字和,');$('#lab1').css('color','red');this.value=value.replace(/[^\d\,\/]/ig,'');}else{$('#lab1').html('')}">
            <label id="lab1"></label>
        </div>


        <div data-role="fieldcontain">
            <label for="sort">排序：</label>
            <select id="sort" name="sort" style="width: 169px;">
                <option value="T">按热度排序</option>
                <option value="R">按时间排序</option>
                <option value="S">按评分排序</option>
                <option value="U">按近期热门</option>
            </select>
        </div>
        <input type="submit" data-inline="true"  style="width: 60px;text-align: center" value="更新">
    </form>
</div>
    <div class="slider" STYLE="display:block"></div>